<template>
  <div>
    <el-dialog
      width="600px"
      :title="$t('创建')"
      destroy-on-close
      :close-on-click-modal="false"
      :visible.sync="show"
      :before-close="cancel"
    >
      <el-alert
        style="margin-bottom: 15px"
        title="创建盘点单会锁定所有库位库存，盘点时不要对盘点单内的库位进行出库入库操作，盘点审核完才能进行操作，没有被选择的库位也可以正常操作"
        type="warning"
        :closable="false"
      />
      <el-alert
        style="margin-bottom: 15px"
        title="审核更新库存操作一定要核对完成才能使用，盘点审核更新库存公式：总库存 = 预留库存 + 云库存 + 卖家持有 + 卖家导入后未发货的 "
        type="warning"
        :closable="false"
      />

      <el-form ref="elForm" :model="form" :rules="rules" size="small">
        <!--  -->
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <!-- type	盘点类型：1.扫码 2.手动+扫码 -->
              <el-radio-group v-model="form.type">
                <el-radio :label="1">
                  <!-- 扫码盘点 -->
                  扫码盘点
                </el-radio>
                <el-radio :label="2">
                  <!-- 手动+扫码盘点 -->
                  手动+扫码盘点
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  -->
        <el-row :gutter="15">
          <el-col :span="8">
            <!-- 创建全部绑定库位盘点 -->
            <el-form-item>
              <el-button
                v-hasPermi="['distribution:stockCheck:createStockCheckAllPosition']"
                style="width: 100%"
                @click="handleCreateAll"
              >
                <!-- 创建全部绑定库位盘点 -->
                创建全部绑定库位盘点
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- 导入库存盘点 -->
            <el-form-item>
              <el-button
                v-hasPermi="['distribution:stockCheck:createStockCheckImportPosition']"
                style="width: 100%"
                @click="showImport = true"
              >
                <!-- 导入库存盘点 -->
                导入库存盘点
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- 手动选择盘点 -->
            <el-form-item>
              <el-button
                v-hasPermi="['distribution:stockCheck:createStockCheckByManualOperation']"
                style="width: 100%"
                @click="handleHandSelect"
              >
                <!-- 手动选择盘点 -->
                手动选择盘点
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">
          <!-- 取 消 -->
          {{ $t('取消') }}
        </el-button>
      </div>
    </el-dialog>
    <!-- 导入 -->
    <Import
      :action="`/distribution/stockCheck/createStockCheckImportPosition/${form.type}`"
      templateUrl="distribution/stockCheck/downTemplate"
      @success="showImport = false"
      :show.sync="showImport"
    />

    <!-- 手动选择盘点 -->
    <el-dialog
      width="900px"
      title="手动选择盘点"
      destroy-on-close
      append-to-body
      :visible.sync="handSelect.show"
      :before-close="() => (handSelect.show = false)"
    >
      <el-form :model="handSelect.queryParams" ref="queryForm" size="small" :inline="true">
        <!-- 搜索内容 -->
        <el-form-item>
          <el-input size="mini" v-model="handSelect.queryParams.spNo" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getStockPositionList">
            <!-- 搜索 -->
            {{ $t('搜索') }}
          </el-button>
          <el-button size="mini" @click="resetQuery">
            <!-- 重置 -->
            {{ $t('重置') }}
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
        :height="calTableHeight() - 150"
        @selection-change="(rows) => (handSelect.tableCheck = rows)"
        ref="TableRef"
        :data="handSelect.data"
      >
        <el-table-column type="selection" align="center" />

        <!-- 库位号 -->
        <el-table-column :label="$t('库位号')" align="center" prop="spNo" />
        <el-table-column :label="$t('sku')" align="center" prop="skuNo" />
        <el-table-column :label="$t('图片')" align="center" prop="spNo">
          <template #default="{ row }">
            <el-image
              fit="contain"
              style="width: 50px; height: 50px"
              :key="Math.random()"
              v-hover="row.imgUrl"
              :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
            />
          </template>
        </el-table-column>
        <!-- 数量 -->
        <el-table-column label="数量" align="center" prop="totalNum" />
      </el-table>
      <pagination
        v-show="handSelect.pageTotal > 0"
        :total="handSelect.pageTotal"
        :page.sync="handSelect.queryParams.pageNum"
        :limit.sync="handSelect.queryParams.pageSize"
        @pagination="getStockPositionList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="handSelect.show = false">
          <!-- 关闭 -->
          {{ $t('关闭') }}
        </el-button>

        <el-button type="primary" @click="submitHandSelect">
          <!-- 确认 -->
          {{ $t('确定') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createStockCheckAllPosition,
  createStockCheckByManualOperation,
  getStockPositionList,
} from '@/api/distribution/sku/Inventory'
import Import from '@/components/Import/index.vue'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: {
    Import,
  },
  props: {
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      /**手动选择 */
      handSelect: {
        show: false,
        tableCheck: [],
        data: [],
        pageTotal: 0,
        queryParams: {
          spNo: '',
          pageNum: 0,
          pageSize: 10,
        },
      },
      showImport: false,
      form: {
        type: 1,
      },
      rules: {
        type: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    }
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
      }
    },
  },
  methods: {
    submitHandSelect() {
      const data = this.handSelect.tableCheck.map((i) => i.id)
      if (data.length == 0) {
        return this.$message.error(this.$t('请选择'))
      }
      createStockCheckByManualOperation(data.toString(), this.form.type).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })
          this.handSelect.show = false
          this.$emit('close')
        }
      })
    },
    resetQuery() {
      this.handSelect.queryParams = {
        spNo: '',
        pageNum: 0,
        pageSize: 10,
      }
      this.getStockPositionList()
    },
    async handleHandSelect() {
      await this.getStockPositionList()
      this.handSelect.show = true
    },
    async getStockPositionList() {
      const { rows, total } = await getStockPositionList(this.handSelect.queryParams)
      console.log(`rows ==>`, JSON.parse(JSON.stringify(rows)))
      this.handSelect.pageTotal = total
      this.handSelect.data = rows
    },
    handleCreateAll() {
      this.$confirm('确定创建全部绑定库位盘点?', this.$t('提示'), {
        type: 'warning',
      })
        .then(() => {
          createStockCheckAllPosition(this.form.type).then((res) => {
            const { code, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
            }
          })
        })
        .catch((e) => e)
    },

    cancel() {
      this.$emit('update:show', false)
      this.$emit('close')
    },
    handleExport() {
      this.download(
        '',
        {
          ...this.queryParams,
        },
        `export_${new Date().getTime()}.xlsx`,
      )
    },
  },
}
</script>
<style scoped lang="scss"></style>
